<template>
  <div id="mainRight">
    <p v-for="(v,i) in listName" :key="i" class="title" v-if="currentName==v.name">
      <svg style="font-size:20px" class="icon" aria-hidden="true">
        <use :xlink:href="v.icon" />
      </svg>
      <span>{{v.title}}</span>
    </p>
    <!-- 组件 -->
    <div v-if="currentId>=0?true:false">
      <div v-for="(v,i) in listName" :key="i">
        <component :is="v.name" v-if="currentName==v.name"></component>
      </div>
    </div>
    <div v-else-if="currentId==-1">
      <namelessChange v-if="currentName=='namelessChange'"></namelessChange>
    </div>
    <div v-else-if="currentId==-2">
      <susBtnChange v-if="currentName=='susBtnChange'"></susBtnChange>
    </div>
    <div v-else-if="currentId==-3">
      <attentionChange v-if="currentName=='attentionChange'"></attentionChange>
    </div>
    <div v-else-if="currentId==-4">
      <remindChange v-if="currentName=='remindChange'"></remindChange>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import searchChange from "@/components/group/search/searchChange";
import namelessChange from "@/components/group/nameless/namelessChange";
import noticeChange from "@/components/group/notice/noticeChange";
import fixedChange from "@/components/group/fixed/fixedChange";
import picLunboChange from "@/components/group/picLunbo/picLunboChange";
import btnChange from "@/components/group/btn/btnChange";
import btn2Change from "@/components/group/btn2/btn2Change";
import picturesChange from "@/components/group/picture/pictureChange";
import titlesChange from "@/components/group/title/titleChange";
import blankChange from "@/components/group/blank/blankChange";
import linesChange from "@/components/group/line/lineChange";
import storeMessageChange from "@/components/group/storeMessage/storeMessageChange";
import bookChange from "@/components/group/editor/editorChange";
import susBtnChange from "@/components/group/susBtn/susBtnChange";
import attentionChange from '@/components/group/attention/attentionChange'
import remindChange from '@/components/group/remind/remindChange'
import cardChange from '@/components/group/card/cardChange'
import margicChange from '@/components/group/margic/margicChange'
import productChange from '@/components/group/product/productChange'
import hotChange from '@/components/group/hot/hotChange'
import vipChange from '@/components/group/vip/vipChange'
import listNavChange from '@/components/group/listNav/listNavChange'
import discountChange from '@/components/group/discount/discountChange'
import informationChange from '@/components/group/information/informationChange'
import myBalanceChange from "@/components/group/myBalance/myBalanceChange";
import storeEvaluateChange from '@/components/group/storeEvaluate/storeEvaluateChange'
import storeRollbagChange from '@/components/group/storeRollbag/storeRollbagChange'
import storeInformationChange from '@/components/group/storeInformation/storeInformationChange'
import storeVideoChange from '@/components/group/video/videoChange'
import attAccountChange from "@/components/group/attAccount/attAccountChange";
export default {
  name: "mainRight",
  data() {
    return {
      listName: [
        { name: "searchChange", title: "搜索框", icon: "#iconsousuo" },
        { name: "namelessChange", title: "页面设置", icon: "#iconshezhi1" },
        { name: "noticeChange", title: "公告", icon: "#icongonggao" },
        { name: "fixedChange", title: "固定定位", icon: "#icondingwei1" },
        { name: "picLunboChange", title: "图片轮播", icon: "#ios-aperture" },
        { name: "btnChange", title: "按钮组", icon: "#iconzujianku-anniuzu" },
        { name: "btn2Change", title: "按钮组2", icon: "#iconzujianku-anniuzu" },
        { name: "picturesChange", title: "图片", icon: "#iconlunbotu" },
        { name: "titlesChange", title: "标题栏", icon: "#iconbiaotikuang" },
        { name: "blankChange", title: "辅组空白", icon: "#iconfuzhukongbai" },
        { name: "linesChange", title: "辅组线", icon: "#iconfengexiantiao" },
        { name: "storeMessageChange", title: "更多门店", icon: "#iconmendian" },
        { name: "bookChange", title: "富文本", icon: "#iconfuwenben" },
        { name: "susBtnChange", title: "悬浮按钮", icon: "#icondiejia" },
        { name: "attentionChange", title: "关注条", icon: "#iconicon_concern" },
        { name: "remindChange", title: "下单提醒", icon: "#iconpiliangxiadan" },
        { name: "cardChange", title: "选项卡", icon: "#iconpiliangxiadan" },
        { name: "margicChange", title: "魔方", icon: "#icontupian" },
        { name: "productChange", title: "商品组", icon: "#icontupian" },
        { name: "hotChange", title: "热区", icon: "#icontupian" },
        { name: "vipChange", title: "会员信息", icon: "#icontupian" },
        { name: "listNavChange", title: "列表导航", icon: "#icontupian" },
        { name: "discountChange", title: "优惠券", icon: "#iconyouhuiquan" },
        { name: "informationChange", title: "精选资讯", icon: "#iconyouhuiquan" },
        { name: "myBalanceChange", title: "我的余额", icon: "#iconbiaotikuang" },
        { name: "storeEvaluateChange", title: "评价列表", icon: "#iconyouhuiquan" },
        { name: "storeRollbagChange", title: "券包列表", icon: "#iconyouhuiquan" },
        { name: "storeInformationChange", title: "门店信息", icon: "#iconyouhuiquan" },
        { name: "storeVideoChange", title: "视频播放", icon: "#iconyouhuiquan" },
        { name: "attAccountChange", title: "关注公众号", icon: "#icongonggao" },
      ],
    };
  },
  components: {
    searchChange,
    namelessChange,
    noticeChange,
    fixedChange,
    picLunboChange,
    btnChange,
    btn2Change,
    picturesChange,
    titlesChange,
    blankChange,
    linesChange,
    storeMessageChange,
    bookChange,
    susBtnChange,
    attentionChange,
    remindChange,
    cardChange,
    margicChange,
    productChange,
    hotChange,
    vipChange,
    listNavChange,
    discountChange,
    informationChange,
    myBalanceChange,
    storeEvaluateChange,
    storeRollbagChange,
    storeInformationChange,
    storeVideoChange,
    attAccountChange,
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
  },
  created() {
    console.log(this.currentName);
  },
  methods: {},
};
</script>


<style lang="less" scoped>
@import url("../../assets/css/base.less");
#mainRight {
  padding: 20px;
  .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #e8eaec;
    color: @mainColor;
    font-weight: bold;
    > span {
      font-size: 18px;
      color: #333;
      margin-left: 10px;
    }
  }
}
</style>
